import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "../globals.css";
import clsx from "clsx";
import TranslationsProvider from "../components/TranslationsProvider/TranslationsProvider";
import initTranslations from "../i18n";
import { dir } from "i18next";
import MyThemeProvider from "../components/ThemeProvider/ThemeProvider";
import ThemeSwitch from "../components/ThemeSwitch/ThemeSwitch";
import LanguageChanger from "../components/LanguageChanger/LanguageChanger";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const i18nNamespaces: string[] = ['home']

export default async function RootLayout({
  children,
  params: { locale }
}: Readonly<{
  children: React.ReactNode,
  params: { locale: string }
}>) {
  const { t, resources } = await initTranslations(locale, i18nNamespaces)
  return (
    <html suppressHydrationWarning lang={locale} dir={dir(locale)}>
      <body className={clsx([inter.className, 'dark:bg-[black]'])}>
        <TranslationsProvider
          namespaces={i18nNamespaces}
          locale={locale}
          resources={resources}
        >
          <MyThemeProvider>
            {children}
            <LanguageChanger />
            <ThemeSwitch />
          </MyThemeProvider>
        </TranslationsProvider>
      </body>

    </html >
  );
}
